<template>
  <van-row class="login-container">
    <van-col span="24" class="form-container">
      <van-row :gutter="[20, 20]">
        <van-col span="24" class="form-title">
          <span>{{ title }}</span>
        </van-col>
        <van-col span="24">
          <div class="logo-container">
            <img src="/ico.svg" alt="Logo" class="logo" />
          </div>
        </van-col>
        <van-col span="24" class="form-body">
          <van-form ref="formRef">
            <van-field v-model="formData.phone" label="账号" size="large"
              :rules="[{ required: true, message: '请输入手机号' }, { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号' }]"
              left-icon="user" placeholder="请输入账号" label-width="3rem" label-align="center" />
            <van-field v-model="formData.password" label="密码" size="large"
              :rules="[{ required: true, message: '请输入密码' }, { validator: validatePassword, message: '密码需 8 - 16 位，包含大小写字母、数字和特殊字符' }]"
              left-icon="lock" type="password" placeholder="请输入密码" label-width="3rem" label-align="center" />
          </van-form>
        </van-col>
        <van-col span="24">
          <van-button size="large" color="#667eea" block @click="handleLogin" style="">
            登录
          </van-button>
        </van-col>
        <van-col span="24">
          <div class="agreement">
            <van-checkbox v-model="agreed" checked-color="#667eea">
              我已阅读并同意 <router-link to="/agreement">用户协议</router-link>
            </van-checkbox>
          </div>
        </van-col>
        <van-col span="12" style="text-align: left;">
          <router-link to="/forgetPwd">忘记密码？</router-link>
        </van-col>
        <van-col span="12" style="text-align: right;">
          <router-link to="/register">注册新账号</router-link>
        </van-col>
      </van-row>
    </van-col>
    <van-col span="24" class="copyright-container">
      <div class="copyright">{{ copyright }}</div>
    </van-col>
  </van-row>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores/user';
const userStore = useUserStore();
const router = useRouter();

const redirect = ref(undefined);

const isWechat = ref(false);
const formData = ref({
  phone: "",
  password: "",
});
const agreed = ref(false);
const title = ref('');
const copyright = ref('');

const formRef = ref(null);

onMounted(() => {
  title.value = import.meta.env.VITE_APP_ZH_TITLE;
  copyright.value = import.meta.env.VITE_APP_COPYRIGHT;
  const userAgent = navigator.userAgent.toLowerCase();
  isWechat.value = userAgent.includes('micromessenger');
  document.body.style.overflow = 'hidden';
});

onUnmounted(() => {
  document.body.style.overflow = '';
});

const validatePassword = (value) => {
  return /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,16}$/.test(value);
};

const handleLogin = async () => {
  if (!formRef.value) return;
  try {
    await formRef.value.validate();
    if (!agreed.value) {
      showDialog({
        message: '请先同意用户协议',
        showCancelButton: true,
        confirmButtonText: '同意',
        confirmButtonColor: '#667eea',
      }).then(() => {
        agreed.value = true;
      }).catch(() => { });
      return;
    }
    showLoadingToast({
      message: '登录中...',
      forbidClick: true,
    });
    userStore.login(formData.value).then(() => {
      router.push({ path: redirect.value || "/" });
    }).catch(() => {
    }).finally(() => {
      closeToast();
    });
  } catch (error) {
    console.error('表单校验失败：', error);
    return;
  }
};
</script>

<style scoped>
.login-container {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 0px 20px 30px 20px;
  text-align: center;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.form-container {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  padding: 15px;
}

.logo-container {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.logo {
  width: 100px;
  height: 100px;
  border: 2px solid #727ba1;
  border-radius: 16px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  padding: 8px;
  background-color: rgba(36, 34, 34, 0.05);
}

.form-title {
  font-weight: bold;
  font-size: 34px;
  color: #667eea;
}

.form-body {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 25px;
}

.agreement a {
  font-size: 15px;
  color: #667eea;
  text-decoration: none;
}

a {
  text-decoration: none;
  color: #667eea;
  cursor: pointer;
  background-color: transparent;
  border: none;
}

a:hover, a:active, a:focus {
  text-decoration: none;
  outline: none;
}

.copyright {
  text-align: center;
  font-size: 15px;
  color: #fff;
}
</style>
